<template>
  <div class="p-2">
    <div class="p-3 !rounded-lg bg-white">
      <el-form
        :inline="true"
        :model="formInline"
        class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
      >
        <el-form-item label="关键字">
          <el-input
            v-model="formInline.user"
            placeholder="搜索订单编号、用户名"
            style="width: 240px"
            clearable
          />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-input
            v-model="formInline.paymentMethod"
            placeholder="支付方式"
            style="width: 240px"
            clearable
          />
        </el-form-item>
        <el-form-item label="金额范围">
          <el-input
            v-model="formInline.amountRange"
            placeholder="金额范围"
            style="width: 240px"
            clearable
          />
        </el-form-item>
        <el-form-item label="支付时间">
          <el-date-picker
            v-model="formInline.payTime"
            type="date"
            placeholder="支付时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex gap-4 mb-6 mt-6">
      <div class="flex-1 bg-white !rounded-lg p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500 mb-1">今日支付金额</p>
            <p class="text-2xl font-semibold text-gray-900">￥12,345.00</p>
            <p class="text-xs text-gray-500 mt-1">
              较昨日 <span class="text-green-500">+15.5%</span>
            </p>
          </div>
          <div
            class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center"
          >
            <i class="fas fa-money-bill text-primary" />
          </div>
        </div>
      </div>
      <div class="flex-1 bg-white !rounded-lg p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500 mb-1">本月累计收入</p>
            <p class="text-2xl font-semibold text-gray-900">￥324,567.00</p>
            <p class="text-xs text-gray-500 mt-1">
              较上月 <span class="text-green-500">+12.3%</span>
            </p>
          </div>
          <div
            class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"
          >
            <i class="fas fa-chart-line text-green-600" />
          </div>
        </div>
      </div>
      <div class="flex-1 bg-white !rounded-lg p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500 mb-1">退款订单</p>
            <p class="text-2xl font-semibold text-gray-900">5</p>
            <p class="text-xs text-gray-500 mt-1">
              较昨日 <span class="text-red-500">+2</span>
            </p>
          </div>
          <div
            class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center"
          >
            <i class="fas fa-rotate-left text-red-600" />
          </div>
        </div>
      </div>
    </div>
    <div class="p-5 !rounded-lg bg-white">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--el-text-color-primary)'
        }"
      >
        <el-table-column prop="order" label="订单编号" />
        <el-table-column prop="name" label="用户">
          <template #default="{ row }">
            <div class="flex items-center">
              <img :src="row.img" class="w-6 h-6 !rounded-full mr-2" />
              <span class="text-sm text-gray-900">{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="paymentAmount" label="支付金额" />
        <el-table-column prop="payStatus" label="支付状态">
          <template #default="{ row }">
            <span
              v-if="row.payStatus == 1"
              class="px-2 py-1 text-xs font-medium text-green-700 bg-green-50 !rounded-full"
              >支付成功</span
            ><span
              v-else
              class="px-2 py-1 text-xs font-medium text-gray-700 bg-red-50 !rounded-full"
              >支付失败</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="支付方式" />
        <el-table-column prop="payTime" label="支付时间" />
        <el-table-column label="操作" fixed="right" width="250">
          <template #default="scope">
            <div class="flex">
              <span
                class="pr-3 text-sm text-primary hover:text-primary-dark whitespace-nowrap !rounded-button"
                @click="onDetail(scope.row)"
                >查看详情</span
              >
              <span
                class="pr-3 text-sm text-gray-500 hover:text-gray-700 whitespace-nowrap !rounded-button"
                @click="onEdit(scope.row)"
                >编辑</span
              >
              <span
                class="pr-3 text-sm text-red-500 hover:text-red-700 whitespace-nowrap !rounded-button"
                @click="onDelete('0')"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pt-5 pr-2 pb-2" style="display: flex; justify-content: right">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          background
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 详情 -->
    <Detail v-if="isDetail" :open="isDetail" @detailChange="detailChange" />
    <!-- 编辑 -->
    <Edit v-if="isEdit" :open="isEdit" @editChange="editChange" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
import Detail from "./detail.vue"; // 详情
import Edit from "./edit.vue"; // 编辑
// 表格数据
const tableData = reactive([
  {
    order: "32y173t2y1",
    name: "王鸿运",
    img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    paymentAmount: "900",
    paymentMethod: "微信",
    payTime: "2022-05-05",
    payStatus: "1" // 1 成功 2 失败
  },
  {
    order: "65321d234134",
    name: "王鸿运",
    img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    paymentAmount: "50",
    paymentMethod: "支付宝",
    payTime: "2022-05-06",
    payStatus: "2" // 1 成功 2 失败
  }
]);
// 查询条件
const formInline = ref<any>({
  user: "",
  paymentMethod: "",
  amountRange: "",
  payTime: ""
});
// 查询
const onSubmit = () => {
  console.log("submit!");
};
// 重置
const onReset = () => {
  formInline.value = {
    user: "",
    paymentMethod: "",
    amountRange: "",
    payTime: ""
  };
};
// 查看详情
const isDetail = ref(false);
// 编辑用户
const isEdit = ref(false);

// 详情
const onDetail = (row: any) => {
  isDetail.value = true;
};
// 详情返回
const detailChange = e => {
  isDetail.value = e;
};
// 编辑
const onEdit = (row: any) => {
  console.log(row, "row");
  isEdit.value = true;
};
// 编辑返回
const editChange = e => {
  console.log(e, "eee");
  isEdit.value = e;
};
// 是否禁用
const onDelete = e => {
  console.log(e, "e");
  ElMessageBox.alert("您是否删除该用户吗？", "提示", {
    confirmButtonText: "OK",
    callback: (action: Action) => {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      onSubmit();
    }
  });
};
// 默认调用
onMounted(() => {
  onSubmit();
});
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
